<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由传参</title>
    <script src="../../js/vue.min.js"></script>
    <!-- 引入样式 组件库-->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/vue-router-2.0.0.js"></script>
</head>
<body>
<div id="app">
    <!--使用query方式传参 query方式不需要修改路由path属性-->
    <router-link to="/login?id=10&name=xxxx">登录</router-link>

    <!--params方式传递路由参数-->
    <router-link to="/register/11/xxx">注册</router-link>
    <router-view>
    </router-view>
</div>
<script>
    let loginComponent = {
        template: `<div><h1>登录组件</h1><br><span>{{msg}}</span><br><span>{{$route.query.id}}</span>
                    <br><span>{{$route.query.name}}</span></div>`,
        data() {
            return {
                msg: '我是登录组件的msg属性'
            }
        },
        created() {
            console.log(this.$route);
            console.log(this.$route.query.id);
            console.log(this.$route.query.name);
        }
    };

    let registerComponent = {
        template: `<div><h1>注册组件</h1><br><span>{{msg}}</span><br><span>{{$route.params.id}}</span>
                    <br><span>{{$route.params.name}}</span></div>`,
        data() {
            return {
                msg: '我是登录组件的msg属性'
            }
        },
    };

    let vueRouter = new VueRouter({

        routes: [
            //多个 路由匹配规则
            //每个路由规则都是一个对象，这个规则对象，必须有两个必须的属性
            //属性1 path 表示监听 哪个路由链接地址
            //属性2 component 表示 路由是前面匹配到的path，则展示对应的那个组件

            {
                path: '/login',
                //属性值，必须是组件对象，不能是组件的引用名称
                component: loginComponent
            },
            {
                path: '/register/:id/:name',
                component: registerComponent
            }
        ]
    });

    let vm = new Vue({
        el: "#app",
        data() {
            return {}
        }, methods: {},
        router: vueRouter //将路由规则对象，注册到vue示例上，用来监听URL地址的变化，然后展示对应的组件
        //加入router属性，运行该页面，地址末端会增加 #/
    });
</script>
</body>
</html>
